<template>
  <div class="im-tabs">
    <ul
      id="imMirror"
      class="clear-fix mirror"
    >
      <li
        v-for="(li, idx) in boardChoice.tabs"
        :key="idx"
        class="im-item fl"
      >
        <span
          v-if="li.img"
          :key="'i' + idx"
          class="im-span-img"
        >
          <img
            class="im-choice-img"
            :src="li.img"
          >
        </span>
        <span
          v-else
          :key="'t' + idx"
          class="im-span-txt"
        >{{ li.text }}</span>
      </li>
    </ul>
    <ul
      v-show="result"
      class="clear-fix"
      :class="{exclusive: exclusive}"
    >
      <li
        v-for="(li, idx) in boardChoice.tabs"
        :key="idx"
        class="im-item fl"
        :class="{active: li.select || active === idx}"
      >
        <span
          v-if="li.img"
          :key="'i' + idx"
          class="im-span-img"
          @touchstart.stop="active = idx"
          @touchend.stop="btnClick($event, idx)"
          @mousedown.stop="!mobile && (active = idx)"
          @mouseup.stop="btnClick($event, btn)"
        >
          <img
            class="im-choice-img"
            :src="li.img"
          >
        </span>
        <span
          v-else
          :key="'t' + idx"
          class="im-span-txt"
          @touchstart.stop="active = idx"
          @touchend.stop="btnClick($event, idx)"
          @mousedown.stop="!mobile && (active = idx)"
          @mouseup.stop="btnClick($event, btn)"
        >{{ li.text }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
/******************/
/******************/
// region    //import
import { $debounce } from './utils';

// endregion

/******************/
/******************/
// region    //initialize

// endregion

/******************/
/******************/
// region    //export

export default {
    name: 'TheChoice',
    props: {
        mobile: {
            type: Boolean,
            default: true,
        },
        boardModel: {
            type: String,
            default: '',
        },
        boardType: {
            type: String,
            default: '',
        },
        boardChoice: {
            type: Object,
            default () {
                return {
                    tabs: [],
                    mode: 'single',
                };
            },
        }, // 选择填空
    },
    data () {
        return {
            result: false,
            exclusive: false, // 是否独占一行显示,
            debounce: $debounce(this.calcLayout, 100, 'fixed', true),
            active: -1,
        };
    },
    watch: {
        boardChoice: {
            handler (val) {
                if (val.tabs.length < 1) {
                    this.result = false;
                }
                this.$nextTick(this.calcLayout);
            },
            deep: true,
            immediate: true,
        },
    },
    mounted,
    beforeDestroy () {
        window.removeEventListener('resize', this.$_debounce);
    },
    methods: {
        calcLayout () {
            let mirror = document.getElementById('imMirror');
            let mWidth = mirror && mirror.getBoundingClientRect().width;
            let items = mirror && mirror.getElementsByClassName('im-item');
            let screenWidth = window.screen.availWidth * 0.02 * 2;
            if (!mWidth) return;
            this.exclusive = Array.from(items).some((item, idx, arr) => {
                let next = arr[idx + 1];
                if (next) {
                    let itemW = item.getBoundingClientRect().width;
                    let nextW = next.getBoundingClientRect().width;
                    return itemW + nextW > mWidth - screenWidth;
                }
                return false;
            });
            this.result = true;
        },
        btnClick (e, idx) {
            let { tabs, mode = 'single' } = this.boardChoice;
            let theSelect = tabs[idx].select;
            this.active = -1;
            if (mode === 'multi') { // 多选模式
                if (tabs.filter(itm => itm.select).length === 1 && theSelect) {
                    return;
                }
                tabs[idx].select = !theSelect;
            } else { // 单选模式
                tabs.forEach((itm, i) => {
                    if (i === idx) {
                        itm.select = 1;
                    } else {
                        itm.select = 0;
                    }
                });
            }
        },
    },
};
// endregion

/******************/
/******************/
// region    //function

/**
   *组件挂载成功执行函数
   */
function mounted () {
    window.addEventListener('resize', this.debounce, false);
}

// endregion

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

  .exclusive {
    .im-item {
      width: 100%;
    }
  }

  .active .im-span-txt {
    background-color: #13d098;
    border-color: #13d098;
    color: #fff;
  }

  .active .im-span-img {
    border-color: #13d098;
  }
</style>
